<template>
  <div class="container">
    <ul>
      <li
        v-for="(item, index) in lotteryStore"
        :key="index"
        :class="{
          'lottery-btn': !item.lottery_id,
          active: activeIndex === index,
        }"
        @click="() => startLotterStore(item)"
      >
        <template v-if="item.lottery_id">
          <img :src="item.image_url" alt="" />
          <span>{{ item.lottery_name }}-{{ index }}</span>
        </template>
        <template v-else>
          <h3>抽奖</h3>
          <span>{{ consume }}矿石/次</span>
        </template>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
const getGoodsUrl: string = "/api/get_lottery_goods";
const getResultGood: string = "/api/get_lottery_result";
import ajax from "../../config/fetch";
import { Result } from "../../../types/fetch";
import { mapActions } from "vuex";

interface Good {
  image_url?: string;
  lottery_id?: string;
  lottery_name?: string;
}
interface Order {
  [index: number]: number;
}
export default defineComponent({
  data() {
    return {
      lotteryStore: [] as Good[],
      indexMap: {
        0: 0,
        1: 1,
        2: 2,
        3: 5,
        4: 8,
        5: 7,
        6: 6,
        7: 3,
      } as Order,
      lotteryResultId: "" as string,
      activeIndex: 0,
      activeIndexMap: 0,
      timer: null,
    };
  },
  methods: {
    ...mapActions({
      saveCountConsume: "saveCountConsume",
      saveLotteryResult: "saveLotteryResult",
    }),
    getAllGoods() {
      ajax(getGoodsUrl).then((res: Result) => {
        let _data = res.data as object[] | string[];
        _data.splice(4, 0, "抽奖");
        this.lotteryStore = res.data as Good[];
      });
    },
    startLotterStore(data: string | Good) {
      if (typeof data === "string") {
        this.startRotate();
        setTimeout(() => {
          ajax(getResultGood).then((res: Result) => {
            this.lotteryResultId = res.data as string;
          });
        }, 2000);
      }
    },
    calculateLotteryName(id: string | number) {
      this.lotteryStore.forEach((el) => {
        if (el.lottery_id === id) {
          let list = this.$store.state.setting.lotteryResults;
          list.push(el.lottery_name);
          this.saveLotteryResult({ lotteryResults: list });
        }
      });
    },
    startRotate() {
      if (!this.$store.state.setting.consumables) {
        alert("您的矿石余额不足！");
        return;
      }
      this.timer = setInterval(() => {
        if (this.activeIndexMap === 7) {
          this.activeIndex = this.indexMap[0];
          this.activeIndexMap = 0;
        } else {
          this.activeIndex = this.indexMap[this.activeIndexMap + 1];
          this.activeIndexMap++;
        }

        if (
          this.lotteryResultId ===
          JSON.parse(JSON.stringify(this.lotteryStore))[this.activeIndex]
            ?.lottery_id
        ) {
          this.saveCountConsume({
            consumables: this.$store.state.setting.consumables - this.consume,
          });
          this.calculateLotteryName(this.lotteryResultId);
          clearInterval(this.timer);
        }
      }, 300);
    },
  },
  mounted() {
    this.getAllGoods();
  },
  computed: {
    consume() {
      return this.$store.state.setting.consume;
    },
  },
});
</script>

<style lang="less">
.container {
  background-color: #f5db95;
  height: 300px;
  width: 300px;
  padding: 30px;
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 30%;
      height: 30%;
      background: #fff;
      border-radius: 10px;
      text-align: center;
      img {
        width: 60%;
        margin: 0 20%;
      }
      span {
        color: orange;
        font-size: 12px;
      }
      &.active {
        span {
          color: red;
        }
      }
      &.lottery-btn {
        background: #ffe6a6;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        h3 {
          margin: 10px;
        }
      }
    }
  }
}
</style>
